<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="./jquery.js"></script>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="./bootstrap-3.4.1/dist/css/bootstrap.css" />
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="./bootstrap-3.4.1/dist/js/bootstrap.js"></script>
  </head>
  <style>
    .table {
      width: 800px;
      margin: auto;
      margin-top: 50px;
    }
    th,
    td {
      text-align: center;
    }
  </style>
  <body>
    <table class="table table-bordered">
      <thead>
        <tr>
          <th><input type="checkbox" id="all" /></th>
          <th>商品名称</th>
          <th>商品价格</th>
          <th>商品数量</th>
        </tr>
      </thead>
      <tbody></tbody>
    </table>
    <div
      style="width: 100%; text-align: center; font-size: 22px; margin-top: 20px"
    >
      <p>总价：<span>0</span>￥</p>
    </div>
  </body>
  <script>
    var goods = [
      {
        status: false,
        name: '苹果',
        price: '10',
        num: 0,
      },
      {
        status: false,
        name: '香蕉',
        price: '10',
        num: 0,
      },
      {
        status: false,
        name: '榴莲',
        price: '10',
        num: 0,
      },
      {
        status: false,
        name: '葡萄',
        price: '10',
        num: 0,
      },
    ]
    //页面加载
    $(function () {
      //显示购物车列表
      showShopCarList()
      countPrice()
      //全选
      $('#all').click(function () {
        $('tbody input').prop('checked', $(this).prop('checked'))

        for (let i in goods) {
          goods[i].status = $(this).prop('checked')
        }
        saveData()
        countPrice()
      })
      $('tbody ').on('change', function () {
        var index = $(event.target).attr('data-id')
        if ($(event.target).attr('type') == 'number') {
          var num = $(event.target).val()
          goods[index].num = num
        } else {
          //复选改变时 要存一下当前状态
          goods[index].status = $(event.target).prop('checked')
        }
        saveData()
        countPrice()
      })
    })
    //统计价格
    function countPrice() {
      var total = 0
      $('tbody input:checkbox').each(function (index, item) {
        if ($(item).prop('checked')) {
          total += goods[index].price * goods[index].num
        }
      })
      $('div p span').html(total)
    }
    //显示购物车列表
    function showShopCarList() {
      //获取本地存储数据
      goods = localStorage.getItem('goods')
        ? JSON.parse(localStorage.getItem('goods'))
        : goods
      var strHtml = ''
      for (let i in goods) {
        var strBox = goods[i].status ? `checked` : ``
        strHtml += `
                <tr>
                    <td>
                        <input type="checkbox" class="check" ${strBox} data-id="${i}" />
                    </td>
                    <td>${goods[i].name}</td>
                    <td>${goods[i].price}</td>
                    <td>
                        <input type="button" value="-" onclick="updateNumDown(${i},this)" class="btn btn-default reduce" />
                        <input type="number" data-id="${i}" min="0"  style="width:50px" value="${goods[i].num}" class="num" />
                        <input type="button" value="+" onclick="updateNumUp(${i},this)" class="btn btn-default add" />
                    </td>
                </tr>
            `
      }
      $('tbody').html(strHtml)
    }
    //数量-- 或 ++
    function updateNumDown(index, obj) {
      if (goods[index].num == 0) {
        return
      }
      $(obj)
        .next()
        .val(--goods[index].num)
      countPrice()
      saveData()
    }
    function updateNumUp(index, obj) {
      $(obj)
        .prev()
        .val(++goods[index].num)
      countPrice()
      saveData()
    }
    //存储本地数据
    function saveData() {
      localStorage.setItem('goods', JSON.stringify(goods))
    }
  </script>
</html>
